<!DOCTYPE html>
<html lang="en">
<head>
    <title>商品详情页</title>
    <link rel="stylesheet" href="css/foot.css"/>
    <link rel="stylesheet" href="css/head.css"/>
    <noscript>抱歉，你的浏览器不支持 JavaScript!</noscript>
    <script src="./js/jquery.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/jquery.cookie.js" charset="utf-8"></script>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <!--    <script type="text/javascript" src="https://unpkg.com/jquery@3/dist/jquery.slim.min.js"></script>-->
    <script type="text/javascript" src="http://fengyuanchen.github.io/distpicker/js/distpicker.js"></script>
    <link rel="icon" type="image/x-icon" href="img/head/favicon.ico" />
    <meta charset="UTF-8">
    <style>
        .disappearBtn{
            display:none;
        }

        .showBtn{
            display:block;
        }
    </style>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="./css/instantbuy.css" rel="stylesheet">
    <script type="text/javascript">

        $(function () {
            queryDetail()
        })


        /**
         * 开始秒杀
         */
        function startInstantbuy(){


            var  sessionid=sessionStorage.getItem("name");

            if (!sessionid) {
                alert("您还未登录,请先登陆 再参加活动进行秒杀")
                window.location.href = "./login.html";
            }else{
                var itemId = "";
                let localUrl1 = decodeURI(window.location.href);
                itemId = localUrl1.split("?")[1].split("=")[1]

                sessionStorage.setItem("mid",itemId);
                //$("#myModal").modal(options);
            }
}
        function addconsignee(){
            var address="";
            address+=$("#seng").val()+" "+ $("#shi").val()+" "+$("#xian").val()+" "+$("#xiang").val();
            $("#consignee_address").val(address);
            var cname=$("#consignee_name").val();
            var cphone=$("#consignee_phone").val();
            var id=sessionStorage.getItem("mid")

            $.ajax({
                url:"seckillOne",
                data:{'id':id},
                dataType:"json",
                success:function (data) {
                    console.log(data)
                    var num =  data[0].number;
                    alert(num)
                    if(num>1){
                        let localUrl = decodeURI(window.location.href);
                        id = localUrl.split("?")[1].split("=")[1];
                        location.href="seckillProduct?id="+id+"&address="+address+"&cname="+cname+"&cphome="+cphone;
                    }else {
                        alert("库存不足");
                    }
                },
                error:function () {
                    alert("请求失败");
                }
            })




 // location.href="cart/submitByOrder?list="+allId1+"&couponId="+couponId+"address="+address+"cname="+cname+"cphone="+cphone;
        }






        /**
         * 查询秒杀商品
         * @param args itemId=UUID
         */
        function queryDetail(){
            var itemId = "";
            let localUrl = decodeURI(window.location.href);
            itemId = localUrl.split("?")[1].split("=")[1];
            //alert(itemId)
            $.ajax({
                url:"seckillOne",
                data:{id:itemId},
                dataType:"json",
                success:function (data) {
                    console.log(data)
                    //alert(data[0].name)
                    //alert(data[0].buy_price)
                    if(data!=null){
                        $("#instantbuy_content").append(
                            "<h1>"+data[0].name+"<small>（秒杀价"+data[0].buy_price+"元）</small></h1>"
                        );
                        let nowTime = new Date().getTime();
                        //alert(nowTime)
                        itemId=data[0].item_id;
                        countdown(nowTime,data[0].start_time,data[0].end_time);
                    }else{
                        alert("商品不存在");
                    }
                },
                error:function () {
                    alert("请求失败");
                }
            })
        }

        /**
         * 倒计时
         * @param nowTime 现在的时间
         * @param startTime1 开始时间
         * @param endTime1 结束时间
         */
        function countdown(nowTime,startTime,endTime){
            let countdownBtn = $('#countdown-btn');
            let startTime1 = new Date(startTime).getTime();
            let endTime1 = new Date(endTime).getTime();
           // alert(nowTime)
            //alert(startTime1)
            alert(endTime1)
            if(nowTime>endTime1){
               // alert(111)
                countdownBtn.html('秒杀结束');
            }else if(nowTime < startTime1){
                let killTime = new Date(startTime1);
                countdownBtn.countdown(killTime,function(event){
                    let format = event.strftime('秒杀倒计时：%D天 %H时 %M分 %S秒');
                    countdownBtn.html(format);
                }).on('finish.countdown',function(){
                    //倒计时结束后回调事件
                    $('#countdown-div').addClass('disappearBtn');
                    $('#instantbuy-div').addClass('showBtn');
                })
            }else{
                //执行秒杀
                $('#countdown-div').addClass('disappearBtn');
                $('#instantbuy-div').addClass('showBtn');
            }
        }

        function search(a) {
            let query = document.getElementById(a).value;
            window.location.href = "./search.html?query=" + query;
        }





    </script>
</head>


<body>
<div id="common_head">
    <div class="line1">
        <div class="content">
            <ul>
                <li class="fore1" id="loginbar" clstag="homepage|keycount|home2013|01b">
                    <span id="head_span" >
                        <a href="login.html">登录</a>&nbsp;&nbsp;|&nbsp;&nbsp;
                        <a href="regist.html">注册</a>
                    </span>
                </li>
            </ul>
        </div>
    </div>
    <div class="line2">
        <img id="logo" src="img/head/logo1.png" alt="logo"/>
        <input type="text" value="" accesskey="s" id="key" autocomplete="off"
               onkeydown="if(event.keyCode===13) search('key');"/>
        <input type="button" value="搜 索" onclick="search('key')"/>
        <span id="goto">
			<a id="goto_order" href="./myorder.html">我的订单</a>
			<a id="goto_cart" href="./mycart.html">我的购物车</a>
		</span>
        <img id="erwm" src="img/head/e2.png" alt="e2" width="76"/>
    </div>
    <div class="line3">
        <div class="content">
            <ul>
                <li><a href="./index.html">首页</a></li>
                <li><a href="./product-list.html?page=1&rows=30">全部商品</a></li>
                <li><a href="./instant-buy.html">秒杀商品</a></li>
                <li><a href="javascript:void(0)">电脑平板</a></li>
                <li><a href="javascript:void(0)">家用电器</a></li>
                <li><a href="javascript:void(0)">汽车用品</a></li>
                <li><a href="javascript:void(0)">食品饮料</a></li>
                <li><a href="javascript:void(0)">图书杂志</a></li>
                <li><a href="javascript:void(0)">服装服饰</a></li>
                <li><a href="javascript:void(0)">大英理财</a></li>
            </ul>
        </div>
    </div>
</div>

<div class="container">
    <div class="panel panel-default text-center">
        <div id="instantbuy_content" class="pannel-heading"></div>
        <div class="panel-body"  id="countdown-div">
            <button type="button" class="btn  btn-lg btn-block btn-danger" id="countdown-btn"></button>
        </div>
        <div class="panel-body disappearBtn"  id="instantbuy-div">
            <button type="button"  class="btn btn-primary btn-lg btn-block btn-info" id="instantbuy-btn" onclick="startInstantbuy()" data-toggle="modal"  data-target="#myModal">开始进入商品秒杀环节</button>
        </div>
        <div id="showSuccess"></div>
    </div>
</div>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">收货人信息</h4>
            </div>
            <div class="modal-body">
                <form id="myForm1">
                    收货人姓名：<input type="text" class="form-control" name="consignee_name"id="consignee_name"   placeholder="收货人姓名">
                    收货人电话：<input type="text" class="form-control" name="consignee_phone"id="consignee_phone"   placeholder="收货人电话">
                    收货人地址：
                    <div data-toggle="distpicker">
                        <select id="seng" data-province="---- 选择省 ----"></select>
                        <select id="shi" data-city="---- 选择市 ----"></select>
                        <select id="xian" data-district="---- 选择区 ----" ></select>
                        <input type="text" id="xiang" onblur="addconsigneevalue()">
                        <input type="hidden" id="consignee_address" name="consignee_address">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="addconsignee()">提交</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>





<div id="common_foot">
    <p>
        Copyright © 2011-2019 网上商城 版权所有 保留一切权利 粤CM-20201119 | 粤ICP备20201119号-1
        <br />
        粤公网安备  20201119号
    </p>
</div>
</body>
<script src="./js/jquery.countdown.js"></script>
</html>